<template>
  <div class="dashboard-container">
    <div class="dataOverview">
      <!-- 机构概述 -->
      <div class="institution">
        <p style="margin-left: 15px;">机构概述</p>
        <div class="content">
          <div class="left-content">
            <p v-if="data.organOverview">{{ data.organOverview.organName }}</p>
            <div v-if="data.organOverview" class="address">地址：{{ data.organOverview.organAddress }}</div>
            <div v-if="data.organOverview" class="duty-person">负责人：{{ data.organOverview.principal }}{{ data.organOverview.phone }}</div>
            <el-button type="primary">查看营业部分布</el-button>
          </div>
          <div class="right-content">
            <div class="one">
              <div class="oneText">
                <span>分拣中心(个)</span>
                <h1 v-if="data.organOverview" class="number">{{ data.organOverview.sortingCenterNumber }}</h1>
              </div>

            </div>
            <div class="two">
              <div class="oneText">
                <span>营业部(个)</span>
                <h1 v-if="data.organOverview" class="number">{{ data.organOverview.agencyNumber }}</h1>
              </div>

            </div>
            <div class="three">
              <div class="twoText">
                <span>司机个数(个)</span>
                <h1 v-if="data.organOverview" class="number">{{ data.organOverview.driverNumber }}</h1>
              </div>

            </div>
            <div class="four">
              <div class="twoText">
                <span>快递员人数(个)</span>
                <h1 v-if="data.organOverview" class="number">{{ data.organOverview.courierNumber }}</h1>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 今日数据 -->
      <div class="todayData">
        <div class="title">
          <h4>今日数据</h4>
          <span style="line-height: 60px;">
            <i class="el-icon-refresh" style="color:#e15536" />
            {{ new Date().toLocaleString() }}
          </span>
        </div>

        <div class="order-data">
          <div class="order-money">
            <span>订单金额(元)</span>
            <h1 v-if="data.todayData">
              <count-to
                :start-val="0"
                :end-val="data.todayData.orderAmount"
                :duration="1000"
                style="fontSize:36px"
              />
            </h1>
            <span v-if="data.todayData" style="color:#818693">较昨日 +{{ data.todayData.orderAmountChanges }}
              <i class="el-icon-top" style="color:#e15536" />
            </span>
          </div>
          <div class="order-num">
            <span>订单数量(笔)</span>
            <h1 v-if="data.todayData">
              <count-to
                :start-val="0"
                :end-val="data.todayData.orderNumber"
                :duration="1000"
                style="fontSize:36px"
              />
            </h1>
            <span v-if="data.todayData" style="color:#818693">较昨日 +{{ data.todayData.orderNumberChanges }}
              <i class="el-icon-top" style="color:#e15536" />
            </span>
          </div>
          <div class="transform-task">
            <span>运输次数(次)</span>
            <h1 v-if="data.todayData">
              <count-to
                :start-val="0"
                :end-val="data.todayData.transportTaskNumber"
                :duration="1000"
                style="fontSize:36px"
              />
            </h1>
            <span v-if="data.todayData" style="color:#818693">较昨日 +{{ data.todayData.transportTaskNumberChanges }}
              <i class="el-icon-top" style="color:#e15536" />
            </span>
          </div>
        </div>
      </div>
    </div>

    <div class="water-ball">
      <!-- 待办任务 -->
      <div class="todo-task">
        <div class="title">
          <h4>待办任务</h4>
          <span style="line-height: 60px;">
            <i class="el-icon-refresh" style="color:#e15536" />
            {{ new Date().toLocaleString() }} - {{ new Date('2023-09-11 23:59:59').toLocaleString() }}
          </span>
        </div>
        <!-- 水球图 -->
        <div ref="ballchart" class="ballchart">
          1
        </div>
      </div>

      <!-- 进行的业务 -->
      <div class="doing-task">
        <div class="title">
          <h4>执行中的任务</h4>
          <span style="line-height: 60px;">
            <i class="el-icon-refresh" style="color:#e15536" />
            {{ new Date().toLocaleString() }}
          </span>
        </div>
      </div>
    </div>
    <!-- 常用功能 -->
    <div class="commom-funtion">
      <div class="title">
        <h4>常用功能</h4>
      </div>
      <div class="list">
        <div class="item">
          <img src="@/assets/navIcons/快递.png" alt="" class="img">
          <p>快递作业</p>
        </div>
        <div class="item">
          <img src="@/assets/navIcons/运输.png" alt="" class="img">
          <p>快递作业</p>
        </div>
        <div class="item">
          <img src="@/assets/navIcons/线路.png" alt="" class="img">
          <p>快递作业</p>
        </div>
        <div class="item">
          <img src="@/assets/navIcons/车辆.png" alt="" class="img">
          <p>快递作业</p>
        </div>
        <div class="item">
          <img src="@/assets/navIcons/司机.png" alt="" class="img">
          <p>快递作业</p>
        </div>
        <div class="item">
          <img src="@/assets/navIcons/运费.png" alt="" class="img">
          <p>快递作业</p>
        </div>
      </div>

    </div>
    <div class="map-route">
      <!-- 线路管理 -->
      <div class="route-manage">
        <div class="title">
          <h4>线路管理</h4>
        </div>
        <div ref="map" class="map">
          1
        </div>
      </div>
      <!-- 运输任务 -->
      <div class="transport-task">
        <div class="title">
          <h4>运输任务</h4>
          <div class="more">
            查看更多
            <i class="el-icon-arrow-right" />
          </div>
        </div>
        <div class="table">
          <el-table
            ref="table"
            :data="data.transportTaskList"
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="id"
              label="任务编号"
            />
            <el-table-column
              prop="startAgency"
              label="起始地"
            />
            <el-table-column
              prop="endAgency"
              label="目的地"
            />
            <el-table-column
              prop="licensePlate"
              label="车辆"
            />
            <el-table-column
              label="任务状态"
            >
              <template v-slot="{row}">
                <span v-if="row.status===2">进行中</span>
                <span v-else>1</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!-- 最后的echarts图 -->
    <div class="charts">
      <div class="linechart">
        <div class="title" style="align-items: center">
          <h4>订单总量</h4>
          <span v-if="data.orderLineChart">{{ data.orderLineChart.monthlyOrderList[0].dateTime }} - {{ data.orderLineChart.monthlyOrderList[1].dateTime }}</span>
        </div>
        <div class="order-status" style="margin:20px 0 0 20px">
          <div class="order-max">
            <div v-if="data.orderLineChart" style="fontSize:28px;color:#e15536;fontWeight:600">{{ data.orderLineChart.orderMaxNumber }}</div>
            <span style="fontSize:14px">订单最高值</span>
          </div>
          <div class="order-avg">
            <div v-if="data.orderLineChart" style="fontSize:28px;color:#e15536;fontWeight:600">{{ data.orderLineChart.orderAverageNumber }}</div>
            <span style="fontSize:14px">订单平均值</span>
          </div>
          <div class="order-min">
            <div v-if="data.orderLineChart" style="fontSize:28px;color:#e15536;fontWeight:600">{{ data.orderLineChart.orderMinNumber }}</div>
            <span style="fontSize:14px">订单最低值</span>
          </div>

        </div>
        <div ref="orderchart" class="orderchart" style="margin-left:30px " />
      </div>
      <div class="barchart">2</div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getData } from '@/api/workspace'
import CountTo from 'vue-count-to'
import * as echarts from 'echarts'
import china from '@/utils/china.json'

export default {
  name: 'Dashboard',
  components: {
    CountTo
  },
  data() {
    return {
      data: {}// 存放首页数据的对象
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  watch: {
    data: {
      deep: true,
      handler() {
        // 绘制图表 将图表的实例放在 this组件实例上
        this.lineChart.setOption({
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [this.data.orderLineChart.monthlyOrderList[0].dateTime, this.data.orderLineChart.monthlyOrderList[1].dateTime]
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [this.data.orderLineChart.monthlyOrderList[0].orderNumber, this.data.orderLineChart.monthlyOrderList[1].orderNumber],
              type: 'line',
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgb(254, 250, 249)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(240, 165, 149)'
                  }
                ])
              },
              lineStyle: {
                color: '#f85c38'
              }
            }
          ]
        })
        // 地图
        echarts.registerMap('china', china)
        this.mapChart.setOption(
          {
            backgroundColor: '#fff',
            geo: {
              map: 'china',
              aspectScale: 0.75, // 长宽比
              zoom: 1.1,
              roam: false,
              itemStyle: {
                normal: {
                  areaColor: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.8,
                    colorStops: [{
                      offset: 0,
                      color: '#ffe4b5' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#ff9739' // 100% 处的颜色
                    }],
                    globalCoord: true // 缺省为 false
                  },
                  shadowColor: 'rgb(58,115,192)'
                },
                emphasis: {
                  areaColor: '#2AB8FF',
                  borderWidth: 0,
                  color: 'green',
                  label: {
                    show: false
                  }
                }
              }
            },
            series: [{
              type: 'map',
              roam: false,
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: '#1DE9B6'
                  }
                },
                emphasis: {
                  textStyle: {
                    color: 'rgb(183,185,14)'
                  }
                }
              },

              itemStyle: {
                normal: {
                  borderColor: 'rgb(147, 235, 248)',
                  borderWidth: 1,
                  areaColor: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.8,
                    colorStops: [{
                      offset: 0,
                      color: '#09132c' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#274d68' // 100% 处的颜色
                    }],
                    globalCoord: true // 缺省为 false
                  }
                },
                emphasis: {
                  areaColor: 'rgb(46,229,206)',
                  borderWidth: 0.1
                }
              },
              zoom: 1.1,
              map: 'china' // 使用
            }, {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              showEffectOn: 'render',
              zlevel: 1,
              rippleEffect: {
                period: 15,
                scale: 4,
                brushType: 'fill'
              },
              hoverAnimation: true,
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  offset: [15, 0],
                  color: '#1DE9B6',
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: '#1DE9B6',
                  shadowBlur: 10,
                  shadowColor: '#333'
                }
              },
              symbolSize: 12,
              data: [0]
            }, // 地图线的动画效果
            {
              type: 'lines',
              zlevel: 2,
              effect: {
                show: true,
                period: 4, // 箭头指向速度，值越小速度越快
                trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: 'arrow', // 箭头图标
                symbolSize: 7 // 图标大小
              },
              lineStyle: {
                normal: {
                  color: '#1DE9B6',
                  width: 1, // 线条宽度
                  opacity: 0.1, // 尾迹线条透明度
                  curveness: 0.3 // 尾迹线条曲直度
                }
              },
              data: [
                { coords: [[118.8062, 31.9208], [119.4543, 25.9222]], lineStyle: { color: '#4ab2e5' }},
                { coords: [[127.9688, 45.368], [119.4543, 25.9222]], lineStyle: { color: '#4fb6d2' }},
                { coords: [[110.3467, 41.4899], [119.4543, 25.9222]], lineStyle: { color: '#52b9c7' }},
                { coords: [[125.8154, 44.2584], [119.4543, 25.9222]], lineStyle: { color: '#5abead' }},
                { coords: [[116.4551, 40.2539], [119.4543, 25.9222]], lineStyle: { color: '#f34e2b' }},
                { coords: [[123.1238, 42.1216], [119.4543, 25.9222]], lineStyle: { color: '#f56321' }},
                { coords: [[114.4995, 38.1006], [119.4543, 25.9222]], lineStyle: { color: '#f56f1c' }},
                { coords: [[117.4219, 39.4189], [119.4543, 25.9222]], lineStyle: { color: '#f58414' }},
                { coords: [[112.3352, 37.9413], [119.4543, 25.9222]], lineStyle: { color: '#f58f0e' }},
                { coords: [[109.1162, 34.2004], [119.4543, 25.9222]], lineStyle: { color: '#f5a305' }},
                { coords: [[103.5901, 36.3043], [119.4543, 25.9222]], lineStyle: { color: '#e7ab0b' }},
                { coords: [[106.3586, 38.1775], [119.4543, 25.9222]], lineStyle: { color: '#dfae10' }},
                { coords: [[101.4038, 36.8207], [119.4543, 25.9222]], lineStyle: { color: '#d5b314' }},
                { coords: [[103.9526, 30.7617], [119.4543, 25.9222]], lineStyle: { color: '#c1bb1f' }},
                { coords: [[108.384366, 30.439702], [119.4543, 25.9222]], lineStyle: { color: '#b9be23' }},
                { coords: [[113.0823, 28.2568], [119.4543, 25.9222]], lineStyle: { color: '#a6c62c' }},
                { coords: [[102.9199, 25.46639], [119.4543, 25.9222]], lineStyle: { color: '#96cc34' }}
              ]
            }
            ]
          }
        )
      }
    }
  },

  mounted() {
    this.lineChart = echarts.init(this.$refs.orderchart)
    this.mapChart = echarts.init(this.$refs.map)
  },

  created() {
    this.getData()
  },

  methods: {
    async getData() {
      const res = await getData()
      console.log(res)
      this.data = res.data
    }

  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 25px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }

}

.dataOverview{
  display: flex;
}
.institution{
  width: 680px;
  height: 235px;
  border-radius: 2%;
  background-color: #fff;
}
.todayData{
  width: 478px;
  height: 233px;
  border-radius: 2%;
  background-color: #fff;
  margin-left: 25px;
}

 .institution .content{
  display: flex;
  justify-content: center
}

.left-content{
  width: 320px;
  height: 155px;
  border-right: 1px solid #ebeef5;
}
.right-content{
  width: 320px;
  height: 155px;
  display: flex;
  flex-wrap: wrap;
}
.address{
  font-size: 14px;
  color: #989ca7;
}
.duty-person{
  margin: 10px 0 20px 0;
  font-size: 14px;
  color: #989ca7;
}
.oneText{
  width: 160px;
  height: 85px;
  font-size: 14px;
  padding-left: 30px;
}
.twoText{
  width: 160px;
  height: 66px;
  font-size: 14px;
  padding-left: 30px;
}

.number{
  color: #e15536;
  font-size: 32px;
}

.title{
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}

.todayData .order-data{
  display: flex;
  justify-content: space-evenly
}

.order-data span{
  font-size: 14px;
}

.water-ball{
  display: flex;
}

.water-ball .todo-task{
  width: 680px;
  height: 290px;
  margin-top: 20px;
  border-radius: 2%;
  background-color: #fff;
}
.ballchart{
  width: 640px;
  height: 210px;
}

.water-ball .doing-task{
  width: 478px;
  height: 290px;
  background-color: #fff;
  margin-top: 20px;
  margin-left: 25px;
  border-radius: 2%;
}

.commom-funtion{
  width: 100%;
  height: 190px;
  background-color: #fff;
  margin-top: 20px;
  border-radius: 2%;
}
.commom-funtion .item{
  width: 173px;
  height: 116px;
  background-color: #fafafb;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10%;
  cursor:pointer
}
.item .img{
  width: 40px;
  height: 40px;
}
.commom-funtion .list{
  display: flex;
  justify-content: space-around
}
.map-route{
  display: flex;
  justify-content: space-between;
}
.route-manage{
  width: 575px;
  height: 482px;
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
}
.transport-task{
  width: 575px;
  height: 481px;
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
}
.transport-task .more{
  line-height: 60px;
  color: #989ca7;
  font-size: 14px;
  cursor: pointer;
}
::v-deep .el-table .cell {
  white-space: nowrap;
}

.charts{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.linechart{
  width: 575px;
  height: 595px;
  background-color: #fff;
  border-radius: 5px;

}
.barchart{
  width: 575px;
  height: 595px;
  background-color: #fff;
  border-radius: 5px;
}
.order-status{
  display: flex;
  width: 500px;
  height: 50px;
  justify-content: space-around
}
.orderchart{
  width: 502px;
  height: 400px;
  background-color: #fff;
}
.map{
  width: 540px;
  height: 400px;
}
</style>
